import React from 'react'

// components
import GameCard from "../../../shared-components/GameCard/GameCard"
import {WhiteSpace, WingBlank} from "antd-mobile";

const FollowGames = props => {

    const games = [
        {
            id: 1,
            onLive: false,
            title: '科比31+10安东尼30分伤退湖人负尼克斯遭4连败',
            source: '凤凰体育',
            hot: '2.4w',
            imageUrl: 'http://y3.ifengimg.com/f04c9b92453d105f/2012/1214/xes_0ce7d2bbd62b5e40ddba134e2fe8dc29.jpg',
        },
        {
            id: 2,
            onLive: true,
            title: '正在图文直播凯尔特人vs湖人科比领衔王朝间对决',
            source: '新浪体育',
            hot: '2.4w',
            imageUrl: 'http://i3.sinaimg.cn/ty/k/2007-12-31/U1614P6T12D3390648F44DT20071231114050.jpg',
        },
        {
            id: 3,
            onLive: false,
            title: '雷霆vs火箭前瞻：疯狂双少来袭火箭如何止连败',
            source: 'NBA资讯',
            hot: '2.4w',
            imageUrl: 'http://k.sinaimg.cn/n/transform/20151102/-Nod-fxkhcfq1052522.jpg/w57040f.jpg',
        },
        {
            id: 4,
            onLive: true,
            title: 'NBA总决赛第四场 骑士 VS 勇士',
            source: 'NBA资讯',
            hot: '2.4w',
            imageUrl: 'http://p1.img.cctvpic.com/photoworkspace/contentimg/2016/06/10/2016061018325684558.jpg',
        },
    ]

    // template
    const onLiveGames = games.filter(game => game.onLive)
    const notOnLiveGames = games.filter(game => !game.onLive)
    const onLiveGamesTemplate = (onLiveGames.map(game => <GameCard key={game.id} game={game}/>))
    const notOnLiveGamesTemplate = (notOnLiveGames.map(game => <GameCard key={game.id} game={game}/>))
    return (
        <WingBlank>
            <WhiteSpace size='xl'/>
            <div className='follow-title'>正在直播</div>
            <WhiteSpace/>
            <div className='flex-space-between-align-center flex-wrap-container'>
                {onLiveGamesTemplate}
            </div>
            <WhiteSpace/>
            <div className='follow-title'>未开播</div>
            <WhiteSpace/>
            <div className='flex-space-between-align-center flex-wrap-container'>
                {notOnLiveGamesTemplate}
            </div>
        </WingBlank>
    )
}

export default FollowGames

